<template>
	<view>
		<view class="bj">
			<image src="@/static/images/bj.png" mode="scaleToFill" v-if=""></image>
		</view>
		<headerCustom :pageBack="true" pageBackColor="#FFF"></headerCustom>
		<view class="page renewal_detail">
			<view class="detail_status">
				<view class="icon">
					<image src="@/static/icon/prescription/loading_icon.png" mode="scaleToFill"
						v-if="detail.status==1||detail.status==2"></image>
					<image src="@/static/icon/prescription/success_icon.png" mode="scaleToFill" v-if="detail.status==3"></image>
					<image src="@/static/icon/prescription/no_icon.png" mode="scaleToFill" v-if="detail.status==4"></image>
				</view>
				<view class="detail_title">
					{{detail.statusName || detail.status}}
				</view>
				<view class="detail_subtitle">
					{{statusTips || ''}}
				</view>
			</view>
			<view class="card case_item" v-if="detail.status == 4">
				<view class="item_info flex">
					<view class="info_title">
						处理医生
					</view>
					<view class="info_content">
						{{detail.doctorName || ''}}
					</view>
				</view>
				<view class="item_info flex">
					<view class="info_title">
						拒绝原因
					</view>
					<view class="info_content">
						{{''}}
					</view>
				</view>
			</view>
			<view class="card patient_item">
				<view class="patient_item_info">
					<view class="item_avatar">
						<image
							:src="detail.avatar||'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'"
							mode="scaleToFill"></image>
					</view>
					<view class="item_info">
						<view class="info_name">
							<view class="name">
								{{detail.name || ''}}
							</view>
							<view class="tips blue">
								已实名
							</view>
						</view>
						<view class="info_other">
							<view>
								{{detail.sex==1?"男":"女" || '男'}}
							</view>
							<view v-if="detail&&detail.idCard">
								{{$IdCard(detail&&detail.idCard, 3 ) || 0}}岁
							</view>
							<view>
								{{detail.idCard || 0}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card case_item">
				<view class="item_info">
					<view class="info_title">
						主诉
					</view>
					<view class="info_content">
						{{detail.diseaseDescribe || ''}}
					</view>
				</view>
				<view class="item_info flex" style="justify-content: flex-start;">
					<view class="info_title">
						处方图片：
					</view>
					<view class="image_group" style="flex: auto;">
						<image :src="item" mode="scaleToFill"
							v-for="(item,index) in detail.attachment&&detail.attachment.split(',')" :key="index">
						</image>
					</view>
				</view>
				<view class="item_info flex">
					<view class="info_title">
						选择药态：
					</view>
					<view class="info_text">
						{{detail.drugStateName || detail.drugState}}
					</view>
				</view>
				<view class="item_info flex">
					<view class="info_title">
						整理时间：
					</view>
					<view class="info_text">
						{{$dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')}}
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getOnlinePreFromDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				id: 0,
				statusTips: '',
				detail: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOnlinePreFromDetail(this.id)
		},
		methods: {
			getOnlinePreFromDetail(id) {
				getOnlinePreFromDetail({
					id
				}).then(res => {
					switch (res.data.status) {
						case 1:
							this.statusTips = '已收到您的续方申请，请耐心等待医生开方续方成功后会以短信形式告知'
							break;
						case 2:
							this.statusTips = '医生开具的处方已提交，请耐心等待药师审核续方成功后会以短信形式告知'
							break;
						case 3:
							this.statusTips = '医生开具的处方审核已通过续方成功后会以短信形式告知'
							break;
						default:
							break;
					}
					this.detail = res.data
				}).catch(err => {})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.bj {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: -1;
		height: 600rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.renewal_detail {
		padding: 0 30rpx;

		.detail_status {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			color: #FFFFFF;
			margin-bottom: 110rpx;

			.icon {
				width: 120rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail_title {
				margin: 30rpx 0;
				font-weight: bold;
				font-size: 36rpx;
			}

			.detail_subtitle {
				width: 80%;
				font-size: 26rpx;
			}
		}

		.patient_item {
			position: relative;
			padding: 40rpx 20px;
			background-color: #FFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.patient_item_info {
				display: flex;
				align-items: center;

				.item_avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_info {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #999999;

					.info_name,
					.info_other {
						display: flex;
						align-items: center;

						&>view {
							margin-right: 10rpx;

							&:last-child {
								margin: 0;
							}
						}
					}

					.info_name {
						margin-bottom: 20rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tips {
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 22rpx;
							margin-left: 20rpx;

							&.blue {
								color: #3B6CFE;
								background-color: #F3F8FF;
							}
						}
					}
				}
			}
		}

		.case_item {
			margin-bottom: 30rpx;

			&:last-child {
				margin: 0;
			}

			.item_info {
				margin-bottom: 30rpx;

				&:last-child {
					margin: 0;
				}

				&.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}


				.info_title {
					font-size: 28rpx;
					color: #999999;
				}

				.info_text {
					font-size: 28rpx;
					color: #333333;
				}

				.image_group {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					image {
						flex: 0 0 140rpx;
						width: 120rpx;
						height: 120rpx;
						margin-left: 20rpx;
					}
				}

				.info_content {
					padding: 20rpx;
					background-color: #F8FAFB;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>